<template>
  <div>
    <h1 ref="myh1">Vue 根组件</h1>
    <hr />
    <h2 ref="myh2">h2标签</h2>
    <button @click="print">打印 this</button>
    <br /><br />
    <input type="text" v-if="inputVisble" ref="inputRef" />
    <br />
    <br />
    <button @click="showInput" ref="target">展示输入框</button>
    <br /><br />
    <button @click="resetCount">重置 Count 组件 count的值</button>
    <hr />
    <Count :init="10" ref="mycount"></Count>
  </div>
</template>

<script>
import Count from "@/components/Count.vue";
export default {
  components: {
    Count,
  },
  data() {
    return {
      inputVisble: false,
    };
  },
  methods: {
    print() {
      // 在要操作的 DOM 元素标签内 定义一个 ref 的属性
      // 在需要用到这个属性的时候 使用 this.$refs. 自定义属性 + 样式
      this.$refs.myh1.style.color = "red";
      this.$refs.myh2.style.color = "aqua";
    },
    resetCount() {
      // 获取子组件元素
      console.log(this.$refs.mycount.init);
      // 将组件中的 init 重置为 0
      this.$refs.mycount.count = 0;
    },
    // 展示输入框的显示
    showInput() {
      if (this.inputVisble) {
        this.inputVisble = false;
        // console.log(this.$refs.target);
        this.$refs.target.innerHTML = "显示输入框";
      }else{
        this.inputVisble = true
        this.$nextTick(() => {
          this.$refs.inputRef.focus()
        })
        this.$refs.target.innerHTML = "隐藏输入框";
        // 输入显示出来后 自动获取焦点
        
        // console.log(this.$refs.inputRef)
      }
    },
  },
};
</script>

<style>
</style>